Quando si utilizzano le posizioni assolute con css dobbiamo stare molto attenti altrimenti perdiamo del tempo intile, ecco come usarle.

Con CSS abbiamo sempre detto che ci siamo tolti i limiti delle tabelle, e non c'è cosa più vera.
Inizialmente però, specialmente se facciamo parte della "vecchia scuola", CSS sembra che ci limiti un pò, non sappiamo bene come funziona il posizionamento dei blocchi e così via.
Per posizionare tutti gli elementi del nostro markup ci viene in aiuto un'attributo:

position: absolute | relative;

Questo fa sì che il nostro blocco si posizioni in modo assoluto (come se fluttuasse nella pagina in un punto fisso da noi specificato) o in modo relativo, cioè si posiziona relativamente dopo l'ultimo blocco.

In aiuto a questo abbiamo anche altri attributi che servono sempre al posizionamento:

top: ;
bottom: ;
left: ;
right: ;

Questi 4 elementi specificano la posizione del nostro blocco.
Quando utilizziamo il posizionamento relativo, il nostro elemento del markup può essere quindi spostato in base alla sua attuale posizione, ad esempio:

<div id="header">Questo è il nostro header</div>
<div id="content">Questo è il nostro contenuto</div>

con le regole CSS:

#content {
position: relative;
top: 0;
left: 100px;
}

Questa regola fa in modo che il blocco content sia posizionato relativamente subito dopo top: 0; il blocco precedente (header) e spostato sulla destra left: 100px; di 100 pixel.

Le posizioni, come visto sopra, si calcolano dalla partenza del blocco, quindi left: 100px vuol dire che parte da sinistra e si sposta di 100px.

La posizione assoluta è più particolare, guardando lo stesso esempio, ma cambiando position: relative; in position: absolute; si noterà che il nostro blocco si sposta verso l'alto, proprio all'inizio della pagina.
Questo perchè la sua posizione non è relativa al suo blocco precedente, ma alla finestra del vostro browser, questo cosa vuol dire?
In pratica la posizione 0 di top è l'inizio della finestra e la posizione 0 di right è la parte più a destra della vostra finestra del browser.

Quindi questo attributo può essere usato per molti scopi (ad esempio creare popup all'interno della finestra stessa) ma usando un piccolo trucco (io lo chiamo così :) ) si può fare in modo che la posizione assoluta non sia più relativa alla finestra, ma all'elemento contenitore, in questo modo, quindi, si possono posizionare gli elementi del markup proprio dove vogliamo, ma vediamo come funziona:

<div id="header">
Questo è il nostro header
<div id="content">Questo è il nostro contenuto</div>
</div>

impostiamo poi questo CSS:

#header {
position: relative;
top: 0;
width: 400px;
height: 200px;
}
#content {
position: absolute;
top: 10px;
right: 50px;
}

Come vediamo adesso, il secondo blocco, che ha la posizione assoluta, inizia il suo spostamento a partire dalla destra del suo elemento padre e non dalla finestra.

Questo è possibile impostando all'elemento padre l'attributo position: relative; e l'attributo top: 0;.
Questo fa sì che il padre sia relativo al suo elemento precedente e che il figlio possa prendere i suoi limiti di spostamento.